<!DOCTYPE html>
<ui:composition template="/template/layout.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui"
	xmlns:o="http://omnifaces.org/ui">

	<f:metadata>
		<o:viewParam name="id" value="#{leitorController.formulario.entidade}" />
		<f:viewAction action="#{leitorController.carregarEndereco()}" />
		<f:viewAction action="#{leitorController.prepararCadastro()}" />
	</f:metadata>

	<ui:define name="titulo">Cadastro de Leitores</ui:define>

	<ui:define name="breadcrumb">
		<ul class="breadcrumb">
			<li><a href="/biblioteca/paginas/principal.jsf">Início</a> <span class="divider">/</span></li>
			<li><a href="/biblioteca/paginas/leitor/inicio.jsf">Cadastro de Leitores</a> <span class="divider">/</span></li>
			<li class="active"><h:outputText value="Novo Leitor" rendered="#{leitorController.formulario.entidade.new}" /> <h:outputText
					value="Editar Leitor" rendered="#{!leitorController.formulario.entidade.new}" /></li>
		</ul>
	</ui:define>

	<ui:define name="corpo">
		<h:form id="frmLeitor">

			<h3>
				<h:outputText value="Novo Leitor" rendered="#{leitorController.formulario.entidade.new}" />
				<h:outputText value="Editar Leitor" rendered="#{!leitorController.formulario.entidade.new}" />
			</h3>

			<div class="tabbable">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tabDadosPessoais" data-toggle="tab">Dados Pessoais</a></li>
					<li><a href="#tabEndereco" data-toggle="tab">Endereço</a></li>
				</ul>

				<div class="tab-content">

					<div class="tab-pane active" id="tabDadosPessoais">

						<div class="row-fluid">
							<div class="span6">
								<p:outputLabel value="Nome" for="nome" />
								<p:inputText id="nome" maxlength="60" value="#{leitorController.formulario.entidade.nome}" style="width: 100%;" />
							</div>
						</div>

						<div class="row-fluid">
							<div class="span3">
								<p:outputLabel value="Email" for="email" />
								<p:inputText id="email" maxlength="60" value="#{leitorController.formulario.entidade.email}" style="width: 100%;">
								</p:inputText>
							</div>
							<div class="span3">
								<p:outputLabel value="Data de Nascimento" for="dataNascimento" />
								<p:calendar mask="99/99/9999" navigator="true" yearRange="1900:#{leitorController.dataAtual.year+1900}"
									maxdate="#{leitorController.dataAtual}" id="dataNascimento" pattern="dd/MM/yyyy" locale="pt_BR"
									value="#{leitorController.formulario.entidade.dataNascimento}" />
							</div>
						</div>

						<div class="row-fluid">
							<div class="span3">
								<p:outputLabel value="CPF" for="cpf" />
								<p:inputMask mask="999.999.999-99" id="cpf" size="11" value="#{leitorController.formulario.entidade.cpf}" style="width: 100%;" />
							</div>
							<div class="span3">
								<p:outputLabel value="Telefone" for="telefone" />
								<p:inputMask mask="(99)9999-9999" id="telefone" value="#{leitorController.formulario.entidade.telefone}" style="width: 100%;" />
							</div>
						</div>

					</div>

					<div class="tab-pane" id="tabEndereco">

						<div class="row-fluid">
							<div class="span6">
								<p:outputLabel value="Logradouro" for="logradouro" />
								<p:inputText id="logradouro" maxlength="60" value="#{leitorController.formulario.endereco.logradouro}" style="width: 100%;" />
							</div>
						</div>

						<div class="row-fluid">
							<div class="span2">
								<p:outputLabel value="CEP" for="cep" />
								<p:inputMask mask="99.999-999" id="cep" value="#{leitorController.formulario.endereco.cep}" style="width: 100%;" />
							</div>
							<div class="span2">
								<p:outputLabel value="Número" for="numero" />
								<p:inputText id="numero" maxlength="6" value="#{leitorController.formulario.endereco.numero}" style="width: 100%;" />
							</div>
							<div class="span2">
								<p:outputLabel value="Complemento" for="complemento" />
								<p:inputText id="complemento" maxlength="30" value="#{leitorController.formulario.endereco.complemento}" style="width: 100%;" />
							</div>
						</div>

						<div class="row-fluid">
							<div class="span2">
								<p:outputLabel value="Bairro" for="bairro" />
								<p:inputText id="bairro" maxlength="60" value="#{leitorController.formulario.endereco.bairro}" style="width: 100%;" />
							</div>
							<div class="span2">
								<p:outputLabel value="Cidade" for="cidade" />
								<p:inputText id="cidade" maxlength="60" value="#{leitorController.formulario.endereco.cidade}" style="width: 100%;" />
							</div>
							<div class="span2">
								<p:outputLabel value="Estado" for="estado" />
								<h:selectOneMenu value="#{leitorController.formulario.endereco.estado}" id="estado" style="width: 100%; height: 30px">
									<f:selectItem itemLabel="Selecione" noSelectionOption="true" />
									<f:selectItems value="#{leitorController.formulario.listaEstados}" var="item" itemValue="#{item}" itemLabel="#{item.descricao}" />
								</h:selectOneMenu>
							</div>
						</div>

					</div>

				</div>

			</div>

			<div class="row-fluid">
				<div class="span12" style="margin-top: 15px;">
					<p:commandButton id="btnSalvar" value="Salvar" action="#{leitorController.salvar()}" styleClass="btn btn-primary" ajax="false" />

					<p:spacer width="30" />

					<p:commandButton id="btnLimpar" immediate="true" update="@form" process="@this" value="Limpar" action="#{leitorController.iniciarDados()}"
						rendered="#{leitorController.formulario.entidade.new}" styleClass="btn btn-default" />

					<p:spacer width="30" />

					<p:commandButton id="btnVoltar" ajax="false" immediate="true" value="Voltar" styleClass="btn btn-default"
						action="/paginas/leitor/inicio?faces-redirect=true" />
				</div>
			</div>

		</h:form>

	</ui:define>
</ui:composition>